<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交精选 - 精彩相册推荐</title>
    
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #4080FF;
            --secondary: #722ED1;
            --neutral-light: #F2F3F5;
            --neutral: #E5E6EB;
            --text-dark: #1D2129;
            --text-medium: #4E5969;
            --text-light: #86909C;
            --success: #00B42A;
            --warning: #FF7D00;
            --danger: #F53F3F;
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Inter', 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background-color: #FAFAFA;
            color: var(--text-dark);
            line-height: 1.6;
        }
        
        /* 页面标题样式 */
        .page-header {
            margin-bottom: 2.5rem;
            text-align: center;
            padding: 2rem 0;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
            color: white;
            border-radius: 12px;
            margin-top: 1rem;
        }
        
        .page-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        
        .page-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 区块标题样式 */
        .section {
            margin-bottom: 3.5rem;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .section-title {
            font-size: 1.6rem;
            font-weight: 600;
            position: relative;
            padding-bottom: 0.75rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary);
            border-radius: 3px;
        }
        
        .section-link {
            color: var(--primary);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: var(--transition);
        }
        
        .section-link:hover {
            color: var(--primary-light);
            transform: translateX(3px);
        }
        
        /* 相册卡片基础样式 */
        .album-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: var(--transition);
            border: none;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .album-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        }
        
        /* 相册标签样式 */
        .album-tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        .tag-popular {
            background-color: rgba(22, 93, 255, 0.1);
            color: var(--primary);
        }
        
        .tag-new {
            background-color: rgba(0, 180, 42, 0.1);
            color: var(--success);
        }
        
        .tag-event {
            background-color: rgba(255, 125, 0, 0.1);
            color: var(--warning);
        }
        
        .tag-personal {
            background-color: rgba(114, 46, 209, 0.1);
            color: var(--secondary);
        }
        
        /* 相册图片容器样式 */
        .album-image-container {
            position: relative;
            overflow: hidden;
        }
        
        .album-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .album-card:hover .album-image {
            transform: scale(1.05);
        }
        
        /* 多图相册样式 */
        .multi-photos {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            height: 100%;
        }
        
        .multi-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-photos.count-1 {
            grid-template-columns: 1fr;
        }
        
        .multi-photos.count-3 {
            grid-template-rows: repeat(2, 1fr);
        }
        
        .multi-photos.count-3 .multi-photo:first-child {
            grid-column: span 2;
        }
        
        .multi-photos.count-4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 图片数量指示 */
        .photo-count {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.8rem;
            padding: 3px 8px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 相册信息样式 */
        .album-info {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .album-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
        }
        
        .album-description {
            color: var(--text-medium);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .album-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--text-light);
            margin-top: auto;
        }
        
        .creator-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .creator-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
        }
        
        .creator-name {
            font-weight: 500;
            color: var(--text-medium);
        }
        
        .album-stats {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 1. 网格布局相册展示 */
        .grid-albums {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-albums .album-image-container {
            height: 200px;
        }
        
        /* 2. 突出展示的精选相册 */
        .featured-album {
            display: flex;
            height: 400px;
            margin-bottom: 1.5rem;
        }
        
        .featured-image-container {
            flex: 0 0 50%;
        }
        
        .featured-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .featured-info {
            flex: 1;
            padding: 2rem;
            display: flex;
            flex-direction: column;
        }
        
        .featured-tags {
            margin-bottom: 1rem;
        }
        
        .featured-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .featured-description {
            color: var(--text-medium);
            margin-bottom: 1.5rem;
            flex: 1;
            font-size: 1.05rem;
        }
        
        .featured-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .featured-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 1rem;
        }
        
        .featured-date {
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* 3. 横向滚动相册展示 */
        .scrollable-albums {
            overflow-x: auto;
            padding-bottom: 1rem;
        }
        
        .scroll-container {
            display: flex;
            gap: 1.25rem;
            width: max-content;
        }
        
        .scroll-album {
            min-width: 220px;
            max-width: 220px;
        }
        
        .scroll-album .album-image-container {
            height: 180px;
        }
        
        /* 4. 社交推荐相册 */
        .social-albums {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
        }
        
        .social-album {
            display: flex;
            flex-direction: column;
        }
        
        .social-album .album-image-container {
            height: 220px;
        }
        
        .recommendation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        
        .recommender {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .recommender-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .recommender-info {
            line-height: 1.3;
        }
        
        .recommender-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .recommend-date {
            font-size: 0.8rem;
            color: var(--text-light);
        }
        
        .recommendation-text {
            background-color: var(--neutral-light);
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            font-size: 0.95rem;
            color: var(--text-medium);
            position: relative;
        }
        
        .recommendation-text::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 20px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid var(--neutral-light);
        }
        
        /* 5. 分类式相册展示 */
        .category-albums {
            margin-bottom: 2.5rem;
        }
        
        .category-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }
        
        .category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
        }
        
        .category-album-item {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: var(--transition);
            position: relative;
        }
        
        .category-album-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.07);
        }
        
        .category-album-image {
            width: 100%;
            height: 140px;
            object-fit: cover;
        }
        
        .category-album-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            padding: 1rem 0.75rem 0.75rem;
            color: white;
        }
        
        .category-album-name {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 5px;
        }
        
        .category-album-count {
            font-size: 0.8rem;
            opacity: 0.9;
        }
        
        /* 6. 瀑布流相册布局 */
        .masonry-albums {
            column-count: 1;
            column-gap: 1.5rem;
        }
        
        @media (min-width: 768px) {
            .masonry-albums {
                column-count: 2;
            }
        }
        
        @media (min-width: 992px) {
            .masonry-albums {
                column-count: 3;
            }
        }
        
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1.5rem;
        }
        
        .masonry-album {
            display: flex;
            flex-direction: column;
        }
        
        .masonry-image-container {
            width: 100%;
        }
        
        .masonry-image {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 8px 8px 0 0;
        }
        
        /* 7. 大图预览相册 */
        .preview-albums {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }
        
        .preview-album {
            display: flex;
            flex-direction: column;
        }
        
        .preview-image-container {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .preview-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .preview-thumbs {
            display: flex;
            gap: 8px;
            margin-top: 1rem;
            overflow-x: auto;
            padding-bottom: 8px;
        }
        
        .preview-thumb {
            width: 70px;
            height: 70px;
            border-radius: 4px;
            overflow: hidden;
            flex-shrink: 0;
            cursor: pointer;
            opacity: 0.8;
            transition: var(--transition);
        }
        
        .preview-thumb:hover, .preview-thumb.active {
            opacity: 1;
            transform: scale(1.05);
        }
        
        .preview-thumb-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 按钮样式 */
        .btn {
            border-radius: 8px;
            padding: 8px 16px;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-light);
            border-color: var(--primary-light);
            transform: translateY(-2px);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background-color: var(--primary);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-sm {
            padding: 4px 10px;
            font-size: 0.85rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.75rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-album {
                flex-direction: column;
                height: auto;
            }
            
            .featured-image-container {
                flex: 0 0 300px;
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.8rem;
            }
            
            .section-title {
                font-size: 1.4rem;
            }
            
            .featured-info {
                padding: 1.5rem;
            }
            
            .featured-title {
                font-size: 1.4rem;
            }
            
            .social-albums, .preview-albums {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .action-buttons {
                flex-direction: column;
            }
            
            .album-description {
                -webkit-line-clamp: 1;
            }
        }
    </style>
</head>
<body>
    <div class="container py-6 px-4">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">发现精彩相册</h1>
            <p class="page-subtitle">探索社交圈中最受欢迎的相册集，从旅行记录到生活瞬间，发现美好回忆</p>
        </div>
        
        <!-- 1. 突出展示的精选相册 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title">精选相册</h2>
                <a href="#" class="section-link">查看全部 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="album-card featured-album">
                <div class="featured-image-container album-image-container">
                    <img src="https://picsum.photos/1200/800?random=10" alt="日本旅行相册封面" class="featured-image album-image">
                    <div class="photo-count">
                        <i class="fas fa-images"></i> 42张照片
                    </div>
                </div>
                <div class="featured-info album-info">
                    <div class="featured-tags">
                        <span class="album-tag tag-popular">热门</span>
                        <span class="album-tag tag-event">旅行</span>
                    </div>
                    <h3 class="featured-title">日本关西七日自由行</h3>
                    <p class="featured-description">
                        记录在日本关西地区的七日旅程，包括京都的古寺、大阪的美食、奈良的小鹿和神户的夜景。每一张照片都承载着独特的回忆和文化体验，从清晨的岚山竹林到夜晚的道顿堀，带你领略关西的魅力。
                    </p>
                    <div class="featured-meta">
                        <div class="creator-info">
                            <img src="https://picsum.photos/100/100?random=50" alt="相册创作者头像" class="creator-avatar">
                            <span class="creator-name">林小棠</span>
                        </div>
                        <div class="featured-date">发布于 2023-04-15</div>
                    </div>
                    <div class="featured-stats album-stats">
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>1,254</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>86</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>328</span>
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary">查看相册</button>
                        <button class="btn btn-outline">收藏</button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 2. 网格布局相册展示 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title">热门相册</h2>
                <a href="#" class="section-link">更多热门 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="grid-albums">
                <!-- 多图相册1 -->
                <div class="album-card">
                    <div class="album-image-container">
                        <div class="multi-photos count-3">
                            <img src="https://picsum.photos/600/400?random=1" alt="城市建筑照片1" class="multi-photo">
                            <img src="https://picsum.photos/600/400?random=2" alt="城市建筑照片2" class="multi-photo">
                            <img src="https://picsum.photos/600/400?random=3" alt="城市建筑照片3" class="multi-photo">
                        </div>
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 18张
                        </div>
                    </div>
                    <div class="album-info">
                        <div>
                            <span class="album-tag tag-popular">热门</span>
                            <span class="album-tag tag-event">摄影</span>
                        </div>
                        <h3 class="album-title">城市建筑之美</h3>
                        <p class="album-description">
                            记录现代城市建筑的线条与光影，探索几何美学在建筑中的应用。
                        </p>
                        <div class="album-meta">
                            <div class="creator-info">
                                <img src="https://picsum.photos/100/100?random=51" alt="创作者头像" class="creator-avatar">
                                <span class="creator-name">陈建筑</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>756</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>42</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单图相册 -->
                <div class="album-card">
                    <div class="album-image-container">
                        <img src="https://picsum.photos/600/400?random=4" alt="山间云海照片" class="album-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 24张
                        </div>
                    </div>
                    <div class="album-info">
                        <div>
                            <span class="album-tag tag-event">旅行</span>
                        </div>
                        <h3 class="album-title">黄山云海日出</h3>
                        <p class="album-description">
                            凌晨四点起床登山，只为记录黄山壮丽的云海与日出景观。
                        </p>
                        <div class="album-meta">
                            <div class="creator-info">
                                <img src="https://picsum.photos/100/100?random=52" alt="创作者头像" class="creator-avatar">
                                <span class="creator-name">王旅行者</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>932</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>56</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 多图相册2 -->
                <div class="album-card">
                    <div class="album-image-container">
                        <div class="multi-photos count-4">
                            <img src="https://picsum.photos/600/400?random=5" alt="美食照片1" class="multi-photo">
                            <img src="https://picsum.photos/600/400?random=6" alt="美食照片2" class="multi-photo">
                            <img src="https://picsum.photos/600/400?random=7" alt="美食照片3" class="multi-photo">
                            <img src="https://picsum.photos/600/400?random=8" alt="美食照片4" class="multi-photo">
                        </div>
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 36张
                        </div>
                    </div>
                    <div class="album-info">
                        <div>
                            <span class="album-tag tag-new">新品</span>
                            <span class="album-tag tag-event">美食</span>
                        </div>
                        <h3 class="album-title">周末厨房实验</h3>
                        <p class="album-description">
                            记录周末在家尝试的各种美食食谱，从烘焙到家常菜，每一道都有故事。
                        </p>
                        <div class="album-meta">
                            <div class="creator-info">
                                <img src="https://picsum.photos/100/100?random=53" alt="创作者头像" class="creator-avatar">
                                <span class="creator-name">李美食家</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>628</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>78</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 多图相册3 -->
                <div class="album-card">
                    <div class="album-image-container">
                        <div class="multi-photos count-2">
                            <img src="https://picsum.photos/600/400?random=9" alt="宠物照片1" class="multi-photo">
                            <img src="https://picsum.photos/600/400?random=10" alt="宠物照片2" class="multi-photo">
                        </div>
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 29张
                        </div>
                    </div>
                    <div class="album-info">
                        <div>
                            <span class="album-tag tag-personal">个人</span>
                        </div>
                        <h3 class="album-title">我家猫咪的日常</h3>
                        <p class="album-description">
                            记录我家猫咪"煤球"的可爱瞬间，从睡懒觉到玩疯了，每一刻都值得珍藏。
                        </p>
                        <div class="album-meta">
                            <div class="creator-info">
                                <img src="https://picsum.photos/100/100?random=54" alt="创作者头像" class="creator-avatar">
                                <span class="creator-name">张喵星人</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>1,145</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>93</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 3. 横向滚动相册展示 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title">最近更新</h2>
                <a href="#" class="section-link">查看全部 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="scrollable-albums">
                <div class="scroll-container">
                    <!-- 相册1 -->
                    <div class="album-card scroll-album">
                        <div class="album-image-container">
                            <img src="https://picsum.photos/600/400?random=11" alt="公园春景" class="album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 12张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">春日公园漫步</h3>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=55" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">刘春天</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>324</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册2 -->
                    <div class="album-card scroll-album">
                        <div class="album-image-container">
                            <div class="multi-photos count-2">
                                <img src="https://picsum.photos/600/400?random=12" alt="音乐会照片1" class="multi-photo">
                                <img src="https://picsum.photos/600/400?random=13" alt="音乐会照片2" class="multi-photo">
                            </div>
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 8张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">音乐节现场</h3>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=56" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">赵音乐</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>456</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册3 -->
                    <div class="album-card scroll-album">
                        <div class="album-image-container">
                            <img src="https://picsum.photos/600/400?random=14" alt="海边日落" class="album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 15张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">海边日落集锦</h3>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=57" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">孙海浪</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>621</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册4 -->
                    <div class="album-card scroll-album">
                        <div class="album-image-container">
                            <div class="multi-photos count-3">
                                <img src="https://picsum.photos/600/400?random=15" alt="展览照片1" class="multi-photo">
                                <img src="https://picsum.photos/600/400?random=16" alt="展览照片2" class="multi-photo">
                                <img src="https://picsum.photos/600/400?random=17" alt="展览照片3" class="multi-photo">
                            </div>
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 22张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">现代艺术展</h3>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=58" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">吴艺术</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>289</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册5 -->
                    <div class="album-card scroll-album">
                        <div class="album-image-container">
                            <img src="https://picsum.photos/600/400?random=18" alt="咖啡馆照片" class="album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 9张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">城市咖啡馆巡礼</h3>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=59" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">郑咖啡</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>376</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相册6 -->
                    <div class="album-card scroll-album">
                        <div class="album-image-container">
                            <div class="multi-photos count-4">
                                <img src="https://picsum.photos/600/400?random=19" alt="运动照片1" class="multi-photo">
                                <img src="https://picsum.photos/600/400?random=20" alt="运动照片2" class="multi-photo">
                                <img src="https://picsum.photos/600/400?random=21" alt="运动照片3" class="multi-photo">
                                <img src="https://picsum.photos/600/400?random=22" alt="运动照片4" class="multi-photo">
                            </div>
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 16张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">马拉松比赛记录</h3>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=60" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">钱跑步</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>512</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 4. 社交推荐相册 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title">好友推荐</h2>
                <a href="#" class="section-link">更多推荐 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="social-albums">
                <!-- 推荐相册1 -->
                <div class="album-card social-album">
                    <div class="album-image-container">
                        <img src="https://picsum.photos/600/400?random=23" alt="婚礼照片" class="album-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 56张
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="recommendation-header">
                            <div class="recommender">
                                <img src="https://picsum.photos/100/100?random=61" alt="推荐人头像" class="recommender-avatar">
                                <div class="recommender-info">
                                    <div class="recommender-name">周小明</div>
                                    <div class="recommend-date">2天前</div>
                                </div>
                            </div>
                        </div>
                        <div class="recommendation-text">
                            我最好朋友的婚礼，摄影太棒了！每张照片都充满了幸福感，特别喜欢教堂里的光影效果，强烈推荐大家看看！
                        </div>
                        <h3 class="album-title">幸福时刻 - 我的婚礼相册</h3>
                        <div class="album-meta">
                            <div class="creator-info">
                                <img src="https://picsum.photos/100/100?random=62" alt="创作者头像" class="creator-avatar">
                                <span class="creator-name">陈小美</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>2,145</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>156</span>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-sm">查看相册</button>
                    </div>
                </div>
                
                <!-- 推荐相册2 -->
                <div class="album-card social-album">
                    <div class="album-image-container">
                        <div class="multi-photos count-2">
                            <img src="https://picsum.photos/600/400?random=24" alt="毕业旅行照片1" class="multi-photo">
                            <img src="https://picsum.photos/600/400?random=25" alt="毕业旅行照片2" class="multi-photo">
                        </div>
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 32张
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="recommendation-header">
                            <div class="recommender">
                                <img src="https://picsum.photos/100/100?random=63" alt="推荐人头像" class="recommender-avatar">
                                <div class="recommender-info">
                                    <div class="recommender-name">吴同学</div>
                                    <div class="recommend-date">5天前</div>
                                </div>
                            </div>
                        </div>
                        <div class="recommendation-text">
                            和宿舍的兄弟们一起的毕业旅行，这可能是我们最后一次全员到齐的旅行了。照片记录了我们的欢笑和不舍，青春不散场！
                        </div>
                        <h3 class="album-title">毕业旅行 - 青春纪念册</h3>
                        <div class="album-meta">
                            <div class="creator-info">
                                <img src="https://picsum.photos/100/100?random=64" alt="创作者头像" class="creator-avatar">
                                <span class="creator-name">马毕业</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>876</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>93</span>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-sm">查看相册</button>
                    </div>
                </div>
                
                <!-- 推荐相册3 -->
                <div class="album-card social-album">
                    <div class="album-image-container">
                        <img src="https://picsum.photos/600/400?random=26" alt="画展照片" class="album-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 18张
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="recommendation-header">
                            <div class="recommender">
                                <img src="https://picsum.photos/100/100?random=65" alt="推荐人头像" class="recommender-avatar">
                                <div class="recommender-info">
                                    <div class="recommender-name">林艺术</div>
                                    <div class="recommend-date">1周前</div>
                                </div>
                            </div>
                        </div>
                        <div class="recommendation-text">
                            这个插画展太惊艳了！艺术家的想象力让人惊叹，每张作品都有自己的故事。强烈建议艺术爱好者去现场看看，这里是我拍的部分作品。
                        </div>
                        <h3 class="album-title">奇幻插画艺术展</h3>
                        <div class="album-meta">
                            <div class="creator-info">
                                <img src="https://picsum.photos/100/100?random=66" alt="创作者头像" class="creator-avatar">
                                <span class="creator-name">郑插画</span>
                            </div>
                            <div class="album-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>645</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>42</span>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-sm">查看相册</button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 5. 分类式相册展示 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title">相册分类</h2>
                <a href="#" class="section-link">全部分类 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <!-- 旅行类相册 -->
            <div class="category-albums">
                <h3 class="category-title">旅行摄影</h3>
                <div class="category-grid">
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=27" alt="欧洲旅行相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">欧洲小镇风情</div>
                            <div class="category-album-count">32张照片</div>
                        </div>
                    </div>
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=28" alt="海岛旅行相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">海岛度假时光</div>
                            <div class="category-album-count">24张照片</div>
                        </div>
                    </div>
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=29" alt="雪山旅行相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">雪山徒步记录</div>
                            <div class="category-album-count">41张照片</div>
                        </div>
                    </div>
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=30" alt="城市旅行相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">城市探索</div>
                            <div class="category-album-count">28张照片</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 生活类相册 -->
            <div class="category-albums">
                <h3 class="category-title">生活记录</h3>
                <div class="category-grid">
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=31" alt="美食相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">舌尖上的美食</div>
                            <div class="category-album-count">36张照片</div>
                        </div>
                    </div>
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=32" alt="宠物相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">萌宠日常</div>
                            <div class="category-album-count">45张照片</div>
                        </div>
                    </div>
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=33" alt="园艺相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">我的小花园</div>
                            <div class="category-album-count">22张照片</div>
                        </div>
                    </div>
                    <div class="category-album-item">
                        <img src="https://picsum.photos/600/400?random=34" alt="手工艺相册" class="category-album-image">
                        <div class="category-album-overlay">
                            <div class="category-album-name">手工制作时光</div>
                            <div class="category-album-count">18张照片</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 6. 瀑布流相册布局 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title">发现灵感</h2>
                <a href="#" class="section-link">加载更多 <i class="fas fa-arrow-down"></i></a>
            </div>
            
            <div class="masonry-albums">
                <!-- 瀑布流相册1 -->
                <div class="masonry-item">
                    <div class="album-card masonry-album">
                        <div class="masonry-image-container album-image-container">
                            <img src="https://picsum.photos/600/800?random=35" alt="长图照片" class="masonry-image album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 15张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">森林探险记</h3>
                            <p class="album-description">
                                深入原始森林，探索大自然的奥秘与美丽。
                            </p>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=67" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">杨自然</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>432</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流相册2 -->
                <div class="masonry-item">
                    <div class="album-card masonry-album">
                        <div class="masonry-image-container album-image-container">
                            <img src="https://picsum.photos/600/400?random=36" alt="正方形照片" class="masonry-image album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 21张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">街头摄影集</h3>
                            <p class="album-description">
                                捕捉城市街头的精彩瞬间，记录平凡生活中的不凡。
                            </p>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=68" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">何街头</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>567</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流相册3 -->
                <div class="masonry-item">
                    <div class="album-card masonry-album">
                        <div class="masonry-image-container album-image-container">
                            <img src="https://picsum.photos/600/900?random=37" alt="竖长照片" class="masonry-image album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 12张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">建筑线条之美</h3>
                            <p class="album-description">
                                从不同角度拍摄的建筑照片，展现几何线条的艺术感。
                            </p>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=69" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">朱建筑</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>389</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流相册4 -->
                <div class="masonry-item">
                    <div class="album-card masonry-album">
                        <div class="masonry-image-container album-image-container">
                            <img src="https://picsum.photos/600/500?random=38" alt="横长照片" class="masonry-image album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 18张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">星空摄影</h3>
                            <p class="album-description">
                                远离城市光污染，拍摄的璀璨星空与银河。
                            </p>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=70" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">秦星空</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>754</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流相册5 -->
                <div class="masonry-item">
                    <div class="album-card masonry-album">
                        <div class="masonry-image-container album-image-container">
                            <img src="https://picsum.photos/600/700?random=39" alt="中等长度照片" class="masonry-image album-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 25张
                            </div>
                        </div>
                        <div class="album-info">
                            <h3 class="album-title">花卉微距摄影</h3>
                            <p class="album-description">
                                用微距镜头探索花朵的微观世界，发现不为人知的美丽。
                            </p>
                            <div class="album-meta">
                                <div class="creator-info">
                                    <img src="https://picsum.photos/100/100?random=71" alt="创作者头像" class="creator-avatar">
                                    <span class="creator-name">花微距</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>621</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 7. 大图预览相册 -->
        <section class="section">
            <div class="section-header">
                <h2 class="section-title">精选作品集</h2>
                <a href="#" class="section-link">更多作品 <i class="fas fa-arrow-right"></i></a>
            </div>
            
            <div class="preview-albums">
                <!-- 预览相册1 -->
                <div class="preview-album">
                    <h3 class="album-title">四季风光摄影集</h3>
                    <div class="preview-image-container">
                        <img src="https://picsum.photos/800/500?random=40" alt="春季风光" class="preview-image" id="mainImage1">
                    </div>
                    <p class="album-description">
                        记录一年四个季节的自然风光变化，从春花到冬雪，感受时光流转的美好。
                    </p>
                    <div class="preview-thumbs">
                        <div class="preview-thumb active" onclick="changeMainImage('mainImage1', 'https://picsum.photos/800/500?random=40')">
                            <img src="https://picsum.photos/800/500?random=40" alt="春季风光缩略图" class="preview-thumb-image">
                        </div>
                        <div class="preview-thumb" onclick="changeMainImage('mainImage1', 'https://picsum.photos/800/500?random=41')">
                            <img src="https://picsum.photos/800/500?random=41" alt="夏季风光缩略图" class="preview-thumb-image">
                        </div>
                        <div class="preview-thumb" onclick="changeMainImage('mainImage1', 'https://picsum.photos/800/500?random=42')">
                            <img src="https://picsum.photos/800/500?random=42" alt="秋季风光缩略图" class="preview-thumb-image">
                        </div>
                        <div class="preview-thumb" onclick="changeMainImage('mainImage1', 'https://picsum.photos/800/500?random=43')">
                            <img src="https://picsum.photos/800/500?random=43" alt="冬季风光缩略图" class="preview-thumb-image">
                        </div>
                    </div>
                    <div class="album-meta mt-3">
                        <div class="creator-info">
                            <img src="https://picsum.photos/100/100?random=72" alt="创作者头像" class="creator-avatar">
                            <span class="creator-name">孙四季</span>
                        </div>
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>1,354</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>108</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 预览相册2 -->
                <div class="preview-album">
                    <h3 class="album-title">城市夜景精选</h3>
                    <div class="preview-image-container">
                        <img src="https://picsum.photos/800/500?random=44" alt="城市夜景1" class="preview-image" id="mainImage2">
                    </div>
                    <p class="album-description">
                        收集了各大城市的绝美夜景，灯光璀璨，展现城市的另一种魅力。
                    </p>
                    <div class="preview-thumbs">
                        <div class="preview-thumb active" onclick="changeMainImage('mainImage2', 'https://picsum.photos/800/500?random=44')">
                            <img src="https://picsum.photos/800/500?random=44" alt="城市夜景缩略图1" class="preview-thumb-image">
                        </div>
                        <div class="preview-thumb" onclick="changeMainImage('mainImage2', 'https://picsum.photos/800/500?random=45')">
                            <img src="https://picsum.photos/800/500?random=45" alt="城市夜景缩略图2" class="preview-thumb-image">
                        </div>
                        <div class="preview-thumb" onclick="changeMainImage('mainImage2', 'https://picsum.photos/800/500?random=46')">
                            <img src="https://picsum.photos/800/500?random=46" alt="城市夜景缩略图3" class="preview-thumb-image">
                        </div>
                        <div class="preview-thumb" onclick="changeMainImage('mainImage2', 'https://picsum.photos/800/500?random=47')">
                            <img src="https://picsum.photos/800/500?random=47" alt="城市夜景缩略图4" class="preview-thumb-image">
                        </div>
                    </div>
                    <div class="album-meta mt-3">
                        <div class="creator-info">
                            <img src="https://picsum.photos/100/100?random=73" alt="创作者头像" class="creator-avatar">
                            <span class="creator-name">夜行者</span>
                        </div>
                        <div class="album-stats">
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>987</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>76</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 切换预览相册主图
        function changeMainImage(imageId, imageUrl) {
            const mainImage = document.getElementById(imageId);
            mainImage.src = imageUrl;
            
            // 更新缩略图激活状态
            const thumbContainer = mainImage.closest('.preview-album').querySelector('.preview-thumbs');
            thumbContainer.querySelectorAll('.preview-thumb').forEach(thumb => {
                thumb.classList.remove('active');
            });
            event.currentTarget.classList.add('active');
        }
        
        // 相册点击事件
        document.querySelectorAll('.album-card').forEach(card => {
            // 点击卡片其他区域跳转到相册详情
            card.addEventListener('click', function(e) {
                // 如果点击的是按钮，则不执行跳转
                if (e.target.closest('.btn') || e.target.closest('.preview-thumb')) {
                    return;
                }
                
                const albumTitle = this.querySelector('.album-title, .featured-title').textContent;
                showToast(`正在打开相册: ${albumTitle}`);
                // 实际应用中这里会跳转到相册详情页
                // window.location.href = 'album-detail.html';
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.stat-item i.far.fa-heart').forEach(heart => {
            heart.addEventListener('click', function(e) {
                e.stopPropagation(); // 阻止事件冒泡到卡片
                this.classList.toggle('far');
                this.classList.toggle('fas');
                this.classList.toggle('text-danger');
                
                // 更新点赞数量
                const countEl = this.nextElementSibling;
                let count = parseInt(countEl.textContent);
                count = this.classList.contains('fas') ? count + 1 : count - 1;
                countEl.textContent = count;
            });
        });
        

    </script>
</body>
</html>
    
